/*********************************************************************************************************************/
/*DISPLAYING**********************************************************************************************************/
/*********************************************************************************************************************/

function Displayer(){

	this.updateWorld = function(){
		/*function that display all the canvas content*/
		
		//clear the world	
		ctx.clearRect(0,0,canvas.width,canvas.height);

		//sin constantes (to make calcul faster for web browser) to calcul xpos; ypos
		var sin45 = 0.707106781; //Pi/4
		var sin15 = 0.258819045; //Pi/12
		var sin13_5 = 0.233445364; //???->I used Approximation
		var sin75 = 0.965925826; //5*Pi/12
			
		//setting the loop for drawing subfunctions
		for(var i=0;i<tile.length;i++){
				for(var j=0;j<tile[i].length;j++){
				
					//difference 1 time out of 2 to have a real isometric hex map
					var diff = (j+Math.floor((i+1)/2));
					
					//tile position
					var xpos = (i*(sin45+sin75)-diff*(sin15+sin75))*tileUnit+mapX;
					var ypos = ((diff*(sin15+sin75)/2)+i*sin13_5)*tileUnit+mapY;
					
					//draw tile & return highness for units on mountains
					var yDiff = drawTile(i,j,xpos,ypos);
					ypos +=yDiff;
					
					//draw other tiles for better design purpose
					drawOverTile(i, j, xpos, ypos);
					
					//draw what need to be drawn about monsters on the tile
					drawMonster(i,j,xpos,ypos);
					
					//ANOTHER HACK
					if (i==6 && j==6) {
						ypos -= buildingImg[1].height + 52
						ctx.globalAlpha = 0.3;
						ctx.drawImage(buildingImg[1],xpos,ypos);
						ctx.globalAlpha = 1;
					}
					
				}
		}
	}

	// --- display subfunctions ---

	/* Note : In all display subfunction :
	- xTile, yTile are the coods of the tile in the tile reference (usually from (0,0) to (9,13))
	- xPosition, yPosition are the coods of the tile according to pixels

	- a function starting by draw calcul positions and image
	- a function starting by display ... displays !

	*/

	// --- tile and overTile ---

	function drawTile(xTile, yTile, xPosition, yPosition) {

		//Get the index of the Array TileImg to draw
		var indexTileToDraw = tile[xTile][yTile];
		
		//to know where the mouse is, permit to edit map easier
		/*if (mapEditing) {
			if(xTile == xmouse && yTile == ymouse){
				indexTileToDraw = 2;
			}
		}*/
		
		//Modif of coods for special tiles (not height 52) for example high ground
		// --> we suppose all tiles have the right width...<--
		dY = 72 - tileImg[indexTileToDraw].height;
		yPosition += dY;
		
		drawThroughIsometricTransformation(displayTile, indexTileToDraw, xPosition, yPosition);
		
		//return this to be reference for other design
		return dY;
	}

	function drawOverTile(xTile, yTile, xPosition, yPosition) {
		/*function that display an overTile*/
		
		//Get the index of the Array TileImg to draw
		var indexOverTileToDraw = tileOver[xTile][yTile];
		
		if (indexOverTileToDraw>0) {
			drawThroughIsometricTransformation(displayOverTile, indexOverTileToDraw, xPosition, yPosition);
		}
	}

	function drawThroughIsometricTransformation(functionDisplay, index, xPosition, yPosition) {
		/*function that display a Tile*/
		
		//WARNING : isometric transformation doesn't work on upper ground tiles, it's not real 3D
		
		//isometric transformation and draw the image
		ctx.save();
		ctx.translate(xPosition+45,yPosition-7);
		ctx.scale(1,0.5);
		ctx.rotate(Math.PI/4);
		ctx.scale(1.4,1.23);
		functionDisplay(index,xPosition,yPosition);
		ctx.restore();
	}

	//these two functions are hacks to avoid copy of images for efficiency purpose.

	function displayTile(index, xPosition, yPosition) {
		ctx.drawImage(tileImg[index],0,0);
	}

	function displayOverTile(index, xPosition, yPosition) {
		ctx.drawImage(tileOverImg[index],0,0);
	}

	// --- monsters ---

	function drawMonster(xTile, yTile, xPosition, yPosition){
		/*function that display a unit or a heros*/
		
		//Get the index of the Array monsterImg to draw
		var indexMonsterToDraw = monster[xTile][yTile];
		
		//To adjust
		if (0<indexMonsterToDraw && indexMonsterToDraw<3) {
			drawUnit(indexMonsterToDraw, xPosition, yPosition);
		}
		if (indexMonsterToDraw>2) {
			drawHeros(indexMonsterToDraw, xPosition, yPosition);
		}
	}

	function drawHeros(index, xPosition, yPosition) {
		/*function that display a heros*/		
		
		//place the heros in the middle of the tile
		//need to convert in tileUnit*n for tileUnit modification support
		xPosition -= 15;
		yPosition -= 7;
		
		//draw it
		displayMonster(index, xPosition, yPosition);
	}

	function drawUnit(index, xPosition, yPosition) {
		/*function that display a 4 ppl unit*/
		
		//convert numbers in tileUnit*n for tileUnit modification support
		//place 4 ppl unit
		var positionInTile_x = [xPosition-10,xPosition+10,xPosition-40,xPosition-20];
		var positionInTile_y = [yPosition-14,yPosition-4,yPosition-7,yPosition+3];
		
		for(var i=0;i<4;i++){
			displayMonster(index, positionInTile_x[i], positionInTile_y[i]);
		}
	}

	function displayMonster(index, xPosition, yPosition) {
		/*function that adjust image offset and display*/
		
		//adjust according to image size
		yPosition = yPosition + 21 - (monsterImg[index].height/2);
		xPosition = xPosition + 64 - (monsterImg[index].width/2);
		
		ctx.drawImage(monsterImg[index],xPosition,yPosition);
	}

}